<template>
  <div ref="OrganDiagramAdd" class="_wz_OrganDiagramAdd">
    <Form ref="formAdd" :model="formData" label-position="right" :label-width="80" :rules="ruleValidate">
      <FormItem label="所属上级">
        {{!!formData.wzLabel?formData.wzLabel:'--'}}
      </FormItem>
      <FormItem label="职位" prop="organizationPosition">
        <i-input v-model="formData.organizationPosition" placeholder="请填写职位" clearable/>
      </FormItem>
      <FormItem label="名称" prop="organizationName">
        <i-input v-model="formData.organizationName" placeholder="请填写名称" clearable/>
      </FormItem>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="formOperationFun">取消</Button>
        <Button type="primary" @click="addSubmit('formAdd')">提交</Button>
      </div>
    </Form>

  </div>
</template>
<script>
  export default {
    //modify 修改 add 新增
    // 需要修改的数据  表单类型  打开方式
    props: ["selectdata", "formType", 'deptData', 'dataType'],//接收来自父组件的数据
    data() {
      return {
        formData: {},//表单数据
        ruleValidate: {//正则
          organizationPosition: [
            {required: true, message: '请填写职位', trigger: 'blur'}
          ],
          organizationName: [
            {required: true, message: '请填写名称', trigger: 'blur'}
          ],
        },
        safetyOrganizationList: [],//组织下拉
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态
    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      var that = this;


      that.axios.get(that.apiUrl.safetyOrganizationList, {params: {deptUuid: that.deptData.deptUuid}})
      .then(res => {
        if (!!res) {
          that.safetyOrganizationList = res.data.data;
        }
      }).catch(err => {
        console.log("失败", err)
      })

      if (that.formType == "add") {
        /*
        * 添加  如果外侧选择 追加父级ID 和 父级名称
        * 如果没有选择  追加 暂无数据
        *
        * 添加 获取外侧点击数据 parentOrganizationId
        * */
        if (!!that.selectdata) {
          that.formData = {
            organizationType: that.dataType,
            deptUuid: that.deptData.deptUuid,
            deptName: that.deptData.deptName,
            parentOrganizationId: that.selectdata._cfg.model.id,
            wzLabel: that.selectdata._cfg.model.label + '-' + that.selectdata._cfg.model.organizationName,
          };//表单
        } else {
          that.formData = {
            organizationType: that.dataType,
            deptUuid: that.deptData.deptUuid,
            deptName: that.deptData.deptName,
            wzLabel: '无上级组织',
          };//表单
        }
      } else {
        that.formData = JSON.parse(JSON.stringify(that.selectdata._cfg.model));//表单
        that.$set(that.formData, 'wzLabel', that.formData.parentOrganizationName);
        //
      }


    },
    methods: {//执行的方法
      //提交表单
      addSubmit(data) {
        var that = this;
        that.$refs[data].validate((valid) => {
          if (valid) {//正则判断使用

            that.$Spin.show();//显示加载

            that.axios.post(that.apiUrl.safetyOrganizationSaveOrUpdate, that.formData)
            .then(res => {
              that.$Spin.hide();
              if (!!res) {
                that.$Message.success("数据保存成功");
                that.$emit("closeFun", true)
              }
            }).catch(err => {
              console.log('失败', err);
            })
          } else {
            this.$Message.error('请正确填写表单');
          }
        })
      },
      //表单关闭
      formOperationFun() {
        this.$emit("closeFun", false)
      },

    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less" scoped>
  ._wz_OrganDiagramAdd {
    padding: 10px 10px 53px 10px;

    .demo-drawer-footer {
      border-radius: 6px;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      border-top: 1px solid #e8e8e8;
      padding: 10px 16px;
      text-align: right;
      background: #fff;
    }

  }


</style>
